<template>
  <div style="width:480px;height:470px;margin:10px auto 10px auto;background:#efefef;padding:30px 0 0 30px; border-radius:45px">
      <el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="registerForm.name" placeholder="请输入姓名" maxlength="10"
            show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="name" required="required">
            <el-input v-model="registerForm.password" show-password ></el-input>
          </el-form-item>
          <el-form-item label="身份" prop="type" required="required">
            <el-select v-model="registerForm.type" placeholder="请选择您的身份" >
                <el-option
                label="学生"
                value="0">
                </el-option>
                <el-option
                label="老师"
                value="1">
                </el-option>
                <el-option
                label="管理员"
                value="2">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级" prop="classNumber">
            <el-select v-model="registerForm.classNumber" placeholder="请选择班级">
                <el-option
                v-for="item in classList"
                :key="item.id"
                :label="`${item.grade}年级${item.classNumber}班`"
                :value="item.id"
                ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="registerForm.gender" placeholder="请选择性别" >
                <el-option
                label="男"
                value="0">
                </el-option>
                <el-option
                label="女"
                value="1">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
              <el-date-picker
                v-model="registerForm.birthday"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item style="margin-top:30px">
            <el-button type="primary" @click="onRegister('registerForm')">注册</el-button>
            <el-button @click="goLoginPage">取消</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>

<script>
import webservice from '../../../api/webservice'
export default {
    data(){
        return{
            classList:[],
            registerForm:{
              birthday:''
            }, //用户注册时填写的内容
            registerRules:{  //注册检验
                 name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                 ],
                 password: [
                     { required: true, message: '请输入密码', trigger: 'blur' }
                 ],
                 type: [
                     { required: true, message: '请选择您的身份', trigger: 'blur' }
                 ],
                 classNumber: [
                    { required: true, message: '请输入班级', trigger: 'blur' }
                 ],
            },
            
        }
    },
    created(){
        
    },
    mounted(){
        this.getClassData()
    },
    methods:{
        //获取班级
        getClassData() {
      webservice.HttpPost("/api/clazz/selectClazzList", '{}', (data) => {
        if (data.code === 200) {
          this.classList = data.data;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
        //注册
         onRegister(formName){
             this.$refs[formName].validate((valid)=>{
                 if(valid){
                    let params ={
                    name:this.registerForm.name,
                    type:this.registerForm.type,
                    clazzId:this.registerForm.classNumber,
                    birthday:this.registerForm.birthday,
                    gender:this.registerForm.gender,
                    password:this.registerForm.password,
                }
                let _params = JSON.stringify(params)
                webservice.HttpPost(
                    "/api/user/register",_params,
                    (data) => {
                    if (data.code === 200) {
                        this.$message.success({
                            message: "注册成功，请前往登录页进行登录",
                            showClose: true,
                            duration: 60000,
                        });
                        this.$router.push('/login')
                    }else{
                        this.$message.error({
                            message: data.message,
                            showClose: true,
                            duration: 1000,
                        });
                    }
                    }
            );
                 }
             })
            
        },
        //返回登录页
        goLoginPage(){
            this.$router.push('/login')
        }
    }
}
</script>

<style scoped>
    /* .el-input /deep/.el-input__inner{
        width: 80%!important;
    } */
    .el-input{
    width:70%;
    }
    .el-select{
    width:70%;
    }
</style>